elementUI中input框无法输入与禁止输入空格

您所在的位置：网站首页 › el input无法输入 › elementUI中input框无法输入与禁止输入空格

elementUI中input框无法输入与禁止输入空格

2023-11-20 01:35| 来源: 网络整理| 查看: 265

input框无法输入的解决办法

vue js

methods:{ change(e) { this.$forceUpdate() } } 如何禁止input框的空格

1、使用vue框架中的.trim修饰符

2、使用原生input标签自带的keyup事件监听方法

// 实现一，简单 // 实现二，更符合WEB标准，结构,表现和行为分离原则 // js部分 methods: { trimLR() { this.formData.title = this.formData.title.replace(/^\s+|\s+$/gm,'') //replace(/^\s+|\s+$/gm,'')去除input的空字符串 }, }

3、使用element UI 的表单验证功能

立即创建 // 实现一 data() { // 自定义title验证规则 var validateTitle = (rule, value, callback) => { const reg = /^[a-zA-Z_\u4e00-\u9fa5]+$/ if (!reg.test(value)) { callback(new Error('只允许填写汉字、字母、下划线')) } else { callback() } } return { //表单验证规则 rules: { title: [ { required: true, message: '请输入名称', trigger: 'change' }, { validator: validateTitle, trigger: 'change' } ], }, } }, // 实现二 data() { return { //表单验证规则 rules: { title: [ { required: true, validator: (rule, value, callback) => { const reg = /^[a-zA-Z_\u4e00-\u9fa5]+$/ if (value == '') { callback(new Error('请填写必填项')) } else if (!reg.test(value)) { callback(new Error('只允许填写汉字、字母、下划线')) } else { callback() } }, trigger: 'change' } ], }, } }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); } }

作者：吴小冷链接：https://www.jianshu.com/p/b1b28ca7b0bd 来源：简书著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

【本文地址】

elementUI中input框无法输入与禁止输入空格

elementUI中input框无法输入与禁止输入空格

今日新闻

推荐新闻